<!-- 汽车票资料卡-->
<!-- 根据资料搜索线路-->
<template >
    <!--  出发城市选择  -->
  <div id="busCarDataDiv">
    <el-form id="form" ref="form" :model="form" label-width="80px" >
      <el-form-item id="text"><h1>汽车票</h1></el-form-item>
      <el-form-item label="出发城市">
          <el-autocomplete
              class="animate__animated animate__fadeInRight"
              :style="{'--animate-duration': '0.5s'}"
            v-model="form.state1"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
        >  </el-autocomplete>
      </el-form-item>
<!--      城市交换     -->
      <div id="busExchange"><el-button id="bt" @click="exchange">换</el-button> </div>
      <!--      目标城市选择  -->
      <el-form-item label="到达城市">
        <el-autocomplete
            class="animate__animated animate__fadeInRight"
            :style="{'--animate-duration': '1s'}"
            v-model="form.state2"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
        > </el-autocomplete>
      </el-form-item>
      <!--      选择日期-->
      <el-form-item label="出发日期">
        <el-col :span="10">
          <el-date-picker
              class="animate__animated animate__fadeInRight"
              :style="{'--animate-duration': '1.2s'}"
              type="date"
              placeholder=""
              v-model="form.date1"
              style="width: 100%;"
              value-format="YYYY-MM-DD"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <!--      车票查询-->
      <el-form-item>
        <el-button type="primary" @click="doThis">查询车票</el-button>
      </el-form-item>
    </el-form>
      <!--  轮播图  -->
      <el-form id="form2">
        <el-carousel :interval="5000" arrow="always" height="295px">
          <el-carousel-item v-for="(item,index) in form.items" :key="item.url">
            <el-link :href="item.link" target="_blank"><img  :src="item.url" alt="img" id="img"/></el-link>
          </el-carousel-item>
        </el-carousel>
      </el-form>
  </div>


</template>

<script>
import router from "../../router"
import axios from "axios";
import store from "../../store";

export default {
  name: "BusDataCard",
  data() {
    return {
      form:{
        restaurants: [],
        data:{
          busInfo: []
        },
        state1: "",
        state2:"",
        date1:"",
        items:[
          {
            url:new URL('../../assets/images-bus/1.jpg',import.meta.url).href,
            link:'http://www.ybxww.com/ybly/html/2020/1229/422132.shtml?mobile',
          },
          {
            url:new URL('../../assets/images-bus/2.jpg',import.meta.url).href,
            link: 'https://m.zhuoku.org/bizhi/36149.html',
          },
          {
            url:new URL('../../assets/images-bus/3.jpg',import.meta.url).href,
            link: 'https://channel.jd.com/furniture.html',
          },
          {
            url:new URL('../../assets/images-bus/4.jpg',import.meta.url).href,
            link: 'https://pages.tmall.com/wow/a/act/tiantian/dailygroup/2391/wupr?spm=a21bo.jianhua.201859.6.7fc011d9RmMqMY&wh_pid=daily-231043',
          }
        ]
      },
    }
  },
  methods: {
    querySearch(queryString, cb) {
      let restaurants = this.restaurants;
      let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return [
        { "value": "北京" },
        { "value": "上海" },
        { "value": "广州" },
        { "value": "深圳" },
      ];
    },
    handleSelect(item) {
      console.log(item);
    },
    exchange(){
      let s = this.form.state1;
      this.form.state1 = this.form.state2;
      this.form.state2 = s;
    },

    doThis() {
        if(this.form.state1!=""&&this.form.state2!=""&&this.form.date1!==""){
          router.push(`/bus-search-result`)
        }else{
            alert("请输入所需要查询的车票信息")
        }
        store.state.busTicketInfo.startPlace = this.form.state1;
        store.state.busTicketInfo.endPlace = this.form.state2;
        store.state.busTicketInfo.date = this.form.date1 ;
        console.log(store.state.busTicketInfo.date);
      // })
    }
  },
  mounted() {
    this.restaurants = this.loadAll();
  }
}
</script>

<style scoped>
#busCarDataDiv{
  margin-left: 120px;
  margin-top: 20px;
  margin-bottom: 50px;
  width: 1287px;

}
#form{
  width: 370px;
  height: 300px;
  float: left;
  border: 5px solid #06c584;
}
#text{
  font-family: "仓耳渔阳体 W04", serif;
  width: 365px;
  color: #FFFFFF;
  /*line-height: 40px;*/
  text-align: center;
  /*height: 100%;*/
  background: #06c584;
}
#form2{
  margin-right: 0px;
  width: 900px;
  height: 300px;
  float: right;

}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
#img{
  /*设置图片宽度和浏览器宽度一致*/
  width: 1060px;
  height:300px;
}
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
#busExchange{
  position: absolute;
  margin-left: 280px;
  top: 323px;
  width: 40px;
  height: 60px;
  border: 1px Solid greenyellow;
  border-left: none;
}
#bt{
  position: absolute;
  top:12px;
}

</style>